  <style>
.pg_bars_p{
  height:25px;
  width:100%;
  background:#f1f1f1;
  border-radius:20px;
}
.pg-bars{
  background:#89C530;
  height:25px;  
  width:2%;
  text-align:right;
  color:#fff;
  font-size:16px;
  border-radius:20px;
}
.fetch_num{
  font-size:20px;
}
.fetchForms{
  height:500px;
   
}
.fetchForms label{
  width:100%;
  display:block;
}
</style>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/static/bootstrap3/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/static/bootstrap3/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/static/bootstrap3/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div style="margin:10px auto 10px auto;"><input type="checkbox" class='chkall' value="1" />&ensp;全选&ensp;&ensp;&ensp;<em class='help-block'>注意：默认抓取200页，出现无法抓取，系统将自动取消执行，连续4次抓取无法写入数据库，任务自动取消。</em>
  
   </div>  
  <div class="fetchForms">
    {foreach $sites as  $key=>$v} 
      <form class="col-md-4" action="{:url('system/gatherData',['act'=>'get_'.$key])}" method="post"  >
        <label>
        <input type="checkbox"  class="chk_flag" value="1" />
        <b><a href="{$sites_url[$key]}" target="_blank">{$v}</a></b>
        </label>         
        <div class="pg_bars_p"><p  class="pg-bars" rel="{$key}" >0%</p></div>
        <div align="right"><span class="fetch_num" id="new_{$key}">+0</span></div>  
      </form>       
    {/foreach} 
  </div>
  <div align="center"><input class="btn btn-primary btn2 " id="subnow" value="抓取" type="button"></div>
</div>
<script>
  $('#subnow').click(function(){
    if($('.chk_flag:checked').size()==0){
      alert('请选择！');
      return false;
    }
    $('#subnow').removeClass().attr('disabled',true);
    $('.fetchForms form').each(function(i,e){
      if($(e).find('.chk_flag').prop("checked")==true){      
        doEventSubmit(e);       
      }     
    })  
    return false;
  })
  
  var _source=[];
  var _source_key  = 0;
  function doEventSubmit(obj){  
    var _url   = $(obj).attr("action"); 
    var _sitename = _url.substring(38);  
    _source[_source_key] = new EventSource(_url);
    var tmp  = _source[_source_key];
    var re;
    var _all = 0;
      tmp.onmessage = function(e) { 
        var re = $.parseJSON(e.data);    
        if(re.pct==100){
         
               tmp.close();
        }  
        _all = re.t_all;
        updatePct(_sitename,re.pct,_all);
      };  
      tmp.onerror = function(){
        updatePct(_sitename,100,_all);
        tmp.close();
      };
      _source_key++;
      return false;
  }
  function updatePct(rel,pct,plus_n){ 
    pct = pct<1 ? 1:pct;
    $(".pg-bars[rel='"+rel+"']").width(pct+'%').html(pct+'%');
    $("#new_"+rel).text('+'+plus_n);
    if(pct==100) updateButton();
  }
  function updateButton(){   
    var ok = 1;
    $('.fetchForms form').each(function(i,e){
      if($(e).find('.chk_flag:checked').size()>0 && $(e).find('.pg-bars').html()!='100%'){
          ok = 0; 
      }     
    })
    if(ok==1){
      $('#subnow').addClass('btn btn-primary btn2').removeAttr('disabled');
    }
  }
  $('.chkall').click(function(){
     var pck = $(this).prop("checked");
    $('.chk_flag').prop("checked",pck==true?true:false);
  })
</script>
  
